<template>
  <div>
    <div class="main">
      <div class="left">
        <div class="title">
          <span></span>团队获客排名（TOP6）
        </div>
        <div class="chartOne"></div>
      </div>
      <div class="right">
        <div class="title trend">
          <div class="biao"><span></span>获客平台排名（TOP6）</div>
          <div class="lastYear">
            <el-date-picker v-model="month" :picker-options="pickerOptions" placeholder="选择月" type="month"
                            value-format="yyyy-MM" @change="getEchartsFour"
            ></el-date-picker>
          </div>
        </div>
        <div class="chartFour"></div>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="title">
          <span></span>跟进类型分布总览饼图
        </div>
        <div class="chartTwo"></div>
      </div>
      <div class="right">
        <div class="title trend">
          <div class="biao"><span></span>新增用户月趋势</div>
          <div class="lastYear">
            <el-radio-group v-model="timeType" @change="getEchartsThree">
              <el-radio label="3">近一年</el-radio>
              <el-radio label="2">近半年</el-radio>
              <el-radio label="1">近3个月</el-radio>
              <el-radio label="0">近一个月</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="chartThree"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    form: String
  },
  watch: {
    form: {
      handler(newValue) {
        this.sonForm = JSON.parse(newValue)
        this.getEchartsOne()
        this.getEchartsTwo()
        this.getEchartsThree()
        this.getEchartsFour()
      },
      immediate: true
    }
  },
  data() {
    return {
      timeType: '0',
      month: '',
      sonForm: '',
      myChartThree: '',
      myChartFour: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()

        }
      }
    }
  },
  mounted() {
    this.getEchartsOne()
    this.getEchartsTwo()
    this.getEchartsThree()
    this.getEchartsFour()
  },
  methods: {
    async getEchartsOne() {
      let nameData, countData
      // try {
      //   let teamCustomerSourceData = await getTeamCustomerSourceData(this.sonForm)
      //   if (teamCustomerSourceData.code === 200) {
      //     const data = teamCustomerSourceData.data
      //     nameData = data.map(item => item.name) || []
      //     countData = data.map(item => item.count) || []
      //   }
      // } catch (error) {
      //   nameData = []
      //   countData = []
      // }

      nameData = ['liuyue', '客户洞察', 'caobaolong', 'zhangxun', 'jacksong', 'admin']
      countData = [27, 12, 7, 4, 3, 1]

      let myChart = echarts.init(document.querySelector('.chartOne'))
      let options = {
        color: '#082aff',
        legend: {
          right: 20,
          icon: 'circle'
        },
        xAxis: {
          type: 'category',
          data: nameData,
          axisLabel: {
            interval: 0,
            rotate: nameData.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          // show: true,
          formatter: `{b}:{c} \n\n`
        },
        series: [
          {
            name: '姓名',
            data: countData,
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              borderRadius: 15
            }
          }
        ]
      }
      myChart.setOption(options)
    },
    async getEchartsTwo() {
      let data
      // try {
      //   let followWayData = await getFollowWayData(this.sonForm)
      //   if (followWayData.code === 200) {
      //     data = followWayData.data
      //   }
      // } catch (error) {
      //   data = []
      // }

      data = [
        {
          'name': '小红书',
          'value': 16,
          'count': 16
        },
        {
          'name': '线下',
          'value': 12,
          'count': 12
        },
        {
          'name': '抖音',
          'value': 1,
          'count': 1
        },
        {
          'name': '企微',
          'value': 1,
          'count': 1
        },
        {
          'name': '美团',
          'value': 1,
          'count': 1
        }
      ]
      let myChart = echarts.init(document.querySelector('.chartTwo'))
      let options = {
        title: {
          text: '跟进类型',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: function(params) {
            let loading =
              params.data.name + '\n\n' + params.data.count
            return loading
          }
        },
        legend: {
          top: 'center',
          left: '80%',
          orient: 'vertical'
        },
        color: ['#FFAB96', '#FFAD3A', '#FFDA8C', '#082aff', '#F4EBEB', '#FFBC5F'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: true,
              formatter: `{b}:{c}% \n\n`,
              padding: [0, -60],
              textStyle: {
                color: '#082aff'
              }
            },
            labelLine: {
              show: true,
              showAbove: true,
              length2: '60',
              length: 20
            },
            data
          }
        ]
      }
      myChart.setOption(options)
    },
    async getEchartsThree() {
      let timeData, currentYearData, lastYearData
      // try {
      //   let cusAddMonthData = await getCusAddInsMonthData({ ...this.sonForm, timeType: this.timeType })
      //   if (cusAddMonthData.code === 200) {
      //     const res = cusAddMonthData.data.sort((a, b) => {
      //       return a.time > b.time ? 1 : -1
      //     })
      //     timeData = res.map(item => item.time) || []
      //     currentYearData = res.map(item => item.addCount) || []
      //     lastYearData = res.map(item => item.lastAddCount) || []
      //   }
      // } catch (error) {
      //   timeData = []
      //   currentYearData = []
      //   lastYearData = []
      //
      // }
      let cusAddMonthData = [
        {
          'addCount': 20,
          'time': '2024-04-07',
          'lastAddCount': 0
        },
        {
          'addCount': 25,
          'time': '2024-04-14',
          'lastAddCount': 0
        },
        {
          'addCount': 65,
          'time': '2024-04-21',
          'lastAddCount': 0
        },
        {
          'addCount': 59,
          'time': '2024-04-26',
          'lastAddCount': 0
        }
      ]
      const res = cusAddMonthData.sort((a, b) => {
        return a.time > b.time ? 1 : -1
      })
      timeData = res.map(item => item.time) || []
      currentYearData = res.map(item => item.addCount) || []
      lastYearData = res.map(item => item.lastAddCount) || []

      if (!this.myChartThree) {
        this.myChartThree = echarts.init(document.querySelector('.chartThree'))
      }
      let options = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['今年', '去年'],
          right: 20,
          icon: 'circle'
        },
        color: ['#FFB860', '#FF6158'],
        grid: {
          left: '3%',
          right: '4%',
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: timeData
        },
        yAxis: {
          type: 'value'
        },

        series: [
          {
            name: '今年',
            type: 'line',
            smooth: true,
            data: currentYearData
          },
          {
            name: '去年',
            type: 'line',
            smooth: true,
            data: lastYearData
          }
        ]
      }

      this.myChartThree.setOption(options)
    },
    async getEchartsFour() {
      let sourceData, countData
      // try {
      //   let cusSourceData = await getCusSourceData({
      //     ...this.sonForm,
      //     time: this.month || parseTime(new Date(), '{y}-{m}')
      //   })
      //   if (cusSourceData.code === 200) {
      //     const data = cusSourceData.data
      //     sourceData = data.map(item => item.customerSourceName) || []
      //     countData = data.map(item => item.count) || []
      //   }
      // } catch (error) {
      //   sourceData = []
      //   countData = []
      // }

      sourceData = ['企微', '拜访', '电话', '其他', '活动', '未跟进']
      countData = [41, 28, 24, 4, 3, 0]

      if (!this.myChartFour) {
        this.myChartFour = echarts.init(document.querySelector('.chartFour'))
      }
      console.log('sourceData', sourceData)
      console.log('countData', countData)
      let options = {
        color: '#082aff',

        legend: {
          right: 20,
          icon: 'circle'
        },
        xAxis: {
          type: 'category',
          data: sourceData
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          // show: true,
          formatter: `{b}:{c} \n\n`
        },
        series: [
          {
            name: '平台',
            data: countData,
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              borderRadius: 10
            }
          }
        ]
      }
      this.myChartFour.setOption(options)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  margin-top: 17px;
  display: flex;
  height: 330px;

  .left {
    width: 50%;
    margin-right: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .right {
    width: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .chartOne,
  .chartTwo,
  .chartThree,
  .chartFour {
    flex: 1;
  }
}

.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #393B44;
  padding: 20px 20px 20px 0;

  span {
    width: 3px;
    height: 21px;
    background: #082aff;
    margin-right: 21px;
  }
}

.trend {
  justify-content: space-between;

  .biao {
    display: flex;
    align-items: center;
  }

  .lastYear {
    font-size: 14px;

    .el-button {
      color: #000;
      margin-right: 20px;
    }

    .el-button:focus {
      color: #082aff;
    }

    .el-date-editor.el-input {
      width: 120px !important;
      margin-right: 30px;
    }
  }
}
</style>
